<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        li.inline {
            display: inline;
        }
        span{
            display: block;
        }
    </style>
</head>
<div>
    <ul>
        <li>
            <p>隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。</p>
            <p> visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p>
        </li>
    </ul>
    <div>
        <p>visibility显示内容</p>
        <p style="visibility:hidden">隐藏内容</p>
        <p>display显示内容1</p>
        <p style="display:none">display隐藏内容</p>
        <p>display显示内容2</p>
    </div>
    <h3>css display块和内联元素</h3>
    <pre>
        块元素  占用全部宽度  强制前后换行
        例如：
          h1     p     div
        
        内联元素 只需要必要的宽度 不强制换行
        例如:
         span  a
    </pre>
    <h3>将列表变为内联元素</h3>
    <ul>
        <li class="inline">主页</li>
        <li class="inline">管理</li>
        <li class="inline">退出</li>
    </ul>
    <h3>将span 变成块元素</h3>
    <span>test span</span>
    <a href="#">test</a>
</div>

</html>